import { Button, Popover } from 'antd';
import React, { useState } from 'react';

const Helper: React.FC<{record: any}> = (props:{record: any}) => {
  const [open, setOpen] = useState(false);
  const {record} = props;
  const hide = () => {
    setOpen(false);
  };

  const handleOpenChange = (newOpen: boolean) => {
    setOpen(newOpen);
  };

  return (
    <Popover
      content={<div>
        <div><a href='https://wiki.ingageapp.com/pages/viewpage.action?pageId=103529562'>详细说明</a></div>
        <div>
            <h3>Webpack 环境</h3>
            <code color='red'>
                import register from {record.key}/register 
            </code>
        </div>
        <div style={{marginTop: 10}}>
            <h3>非Webpack 环境，比如dayone</h3>
            <code>
                <br/>
                第一个参数是自己组件的命名空间，第二个参数是模块名称。
                <br/>
                <code color='red' dangerouslySetInnerHTML={{
                    __html:`window.mfloader.loadMf('${record.key}','register',function(module)){};`
                }}>
                </code>
            </code>
        </div>
      </div>}
      title="使用方法"
      trigger="click"
      visible={open}
      onVisibleChange={handleOpenChange}
    >
      <Button type="primary">查看</Button>
    </Popover>
  );
};

export default Helper;